<style>
    .block {
        background-color: #f9f9f9;
        border: solid #dedede 1px;
        padding: 10px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    #chart {
        height: 300px;
    }

    #stats-table {
        /*margin-top: 10px;*/
    }

    #stats-table td {
        font-size: 11px;
        padding: 6px;
    }

    #notifications div {
        margin: 3px 0px;
        font-size: 11px;
    }
</style>

<div class="row-fluid">
    <?php $orgAccount = $this->Session->read('org_account'); ?>
    <div class="span12 well well-small" style="box-sizing: border-box;">
        <h3>Welcome <?php echo $orgAccount['Organisation']['name']; ?>!</h3>
    </div>
</div>

<div class="row-fluid">
    <div class="span6">
        <h3>Insights</h3>
        <div style="border: solid #eee 1px;">
            <div id="chart"></div>
        </div>
    </div>

    <div class="span3">
        <h3>Current Statistics</h3>
        <table border="0" cellpadding="3" class="table table-bordered" id="stats-table">
            <tr>
                <td>Total Members</td>
                <td><?php echo $stats['total_members']; ?></td>
            </tr>
            <tr>
                <td>Males</td>
                <td><?php echo $stats['total_males']; ?></td>
            </tr>
            <tr>
                <td>Females</td>
                <td><?php echo $stats['total_females']; ?></td>
            </tr>
            <tr>
                <td>Total Groups</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Active Members</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Dormant Members</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Deceased Members On Record</td>
                <td>0</td>
            </tr>
        </table>
    </div>

    <div id="notifications" class="span3">
        <h3>Notifications</h3>

        <!--<div class="alert alert-success">
            <a class="close" data-dismiss="alert" href="#">×</a>
            <h4>New Registrations</h4>
            <b>5</b> New Online Registrations. <a href="#">Click Here To Activate</a>
        </div>-->

        <div class="alert alert-info">
            <a class="close" data-dismiss="alert" href="#">×</a>
            <h4>Subscription</h4>
            <?php
            $orgAccount = $this->Session->read('org_account');
            $subscription = $orgAccount['Organisation']['OrganisationSubscription'];
            $today = new DateTime();
            $endDate = new DateTime($subscription[0]['subscription_end_dt']);
            $daysLeft = $today->diff($endDate)->format('%R%a');
            
            if( $daysLeft > 0 ) {
            ?>            
            Your subscription expires in <i class="icon icon-calendar"></i> <b><?php echo $days->format("%R%a"); ?> days</b>
            <?php } else { ?>
            Your subscription has expired.
            <?php } ?>

            <?php if ( $daysLeft < 7 && $daysLeft  ) { ?>
            Please <a href="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'subscription')); ?>" ><b> Renew Subscription</b></a>
            <?php } ?>
        </div>

    </div>
</div>

<?php echo $this->Html->script('high-charts/js/highcharts.js'); ?>
<script>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart',
                type: 'line'
            },
            title: {
                text: 'Monthly New Memberships',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Online Records and Data Entry',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Number'
                },
                plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' +
                            this.x + ': ' + this.y + '°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                    name: 'Online Registrations',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'Data Entry',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }/*, {
                 name: 'Berlin',
                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                 }, {
                 name: 'London',
                 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                 }*/]
        });
    });
</script>